import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: undefined
    },
    id: {
      type: String,
      required: false,
      default() {
        return 'editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
      }
    },
    isHideTools: {
      type: Boolean,
      required: false,
      default: false
    },
    isPin: {
      type: Boolean,
      required: false,
      default: true
    },
    height: {
      type: String,
      required: false,
      default: '300px'
    },
    width: {
      type: String,
      required: false,
      default: 'auto'
    },
    mode: {
      type: String,
      required: false,
      default: 'ir'
    },
    isComment: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  watch: {},
  data() {
    return {
      contentEditor: undefined
    }
  },
  mounted() {},
  methods: {
    init(value) {
      const that = this
      this.contentEditor = new Vditor('vditor', {
        height: this.height,
        width: this.width,
        toolbarConfig: {
          pin: this.isPin,
          hide: this.isHideTools
        },
        cache: {
          enable: false
        },
        toolbar: [
          'emoji',
          'headings',
          'bold',
          'italic',
          'strike',
          'link',
          '|',
          'list',
          'ordered-list',
          'check',
          'outdent',
          'indent',
          '|',
          'quote',
          'line',
          'code',
          'inline-code',
          'insert-before',
          'insert-after',
          '|',
          //"upload",
          // "record",
          {
            //自定义上传
            hotkey: '',
            name: 'upload',
            // tipPosition: "s",
            tip: '上传图片',
            className: 'right'
          },

          'table',
          '|',
          'undo',
          'redo',
          '|',
          // "fullscreen",
          'edit-mode',
          {
            name: 'more',
            toolbar: [
              //"both",
              'code-theme',
              'content-theme',
              'export',
              'outline',
              'preview'
              //"devtools",
              // "info",
              //"help",
            ]
          }
        ],
        mode: this.mode,
        preview: {
          mode: 'both',
          actions: []
        },
        comment: {
          enable: this.isComment
        },
        value: value ? value : '',
        after: () => {
          // this.contentEditor.setValue(this.value)
        },
        //这里写上传
        upload: {
          accept: 'image/jpg, image/jpeg, image/png', //规定上传的图片格式
          url: process.env.VUE_APP_BASE_API + '/common/upload', //请求的接口
          multiple: false,
          fieldName: 'file',
          max: 2 * 1024 * 1024, //上传图片的大小
          // extraData: {}, //为 FormData 添加额外的参数
          headers: { Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN) },
          // linkToImgUrl: ,
          filename(name) {
            return name
              .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
              .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
              .replace('/\\s/g', '')
          },
          validate(files) {
            const isLt2M = files[0].size / 1024 / 1024 < 2
            if (!isLt2M) {
              that.$message.error('上传图片大小不能超过 10MB!')
            }
          },
          //上传图片回显处理
          format(files, responseText) {
            var data = JSON.parse(responseText)
            //上传图片请求状态
            if (data.code === 200) {
              const filName = data.fileName
              const msg = data.msg
              const code = data.code
              const succ = {}
              succ[filName] = 'http://127.0.0.1:8080' + filName
              //图片回显
              return JSON.stringify({
                msg,
                code,
                data: {
                  errFiles: [],
                  succMap: succ
                }
              })
            } else {
              that.$message.error('图片上传失败')
            }
          },
          error(msg) {
            that.$message.error(msg + '上传失败了')
          }
        }
      })
    },
    getValue() {
      return this.contentEditor.getValue() //获取 Markdown 内容
    },
    getHTML(value) {
      return this.contentEditor.getHTML() //获取 HTML 内容
    },
    setValue(value) {
      return this.contentEditor.setValue(value) //设置 Markdown 内容
    },
    disabled() {
      return this.contentEditor.disabled() //设置 只读
    }
  }
}
